<template>
    <div>
        <el-select v-model="fieldType" :disabled="disableFieldType">
            <el-option v-for="item in fieldOption" :key="item.value" :value="item.value" :label="item.name" />
        </el-select>
    </div>
</template>

<script setup lang="ts" name="field">
import { ref, defineProps, onMounted, watch } from 'vue'

// 定义父组件方法或参数结构类型
const props = defineProps({
    // 字段选项类型，默认显示所有
    fieldOptionType: { 
        type: Number,
        default: 0
    },
    // 字段类型
    fieldType: {
        type: Number,
        default: 1
    },
    // 是否禁用字段类型
    disableFieldType: {
        type: Boolean,
        default: false
    },

    // 字段类型改变触发方法
    fieldTypeChange: Function
})

// 1-文本，2-多行文本，3-单选，4-多选，5-多图，6-附件，7-视频，8-评分
const fieldOption0 = [
    {value: 1, name: '文本'},
    {value: 2, name: '多行文本'},
    {value: 3, name: '单选'},
    {value: 4, name: '多选'},
    {value: 5, name: '多图'},
    {value: 6, name: '附件'},
    {value: 7, name: '视频'},
    {value: 8, name: '评分'},
]

// 1-文本，2-多行文本，3-单选，4-多选，5-多图，6-附件，7-视频
const fieldOption1 = [
    {value: 1, name: '文本'},
    {value: 2, name: '多行文本'},
    {value: 3, name: '单选'},
    {value: 4, name: '多选'},
    {value: 5, name: '多图'},
    {value: 6, name: '附件'},
    {value: 7, name: '视频'}
]

const fieldOption = ref([{value: 1, name: '文本'}])
const fieldType = ref(1) // 字段类型
const disableFieldType = ref(false) // 是否禁用字段类型


// 初始化字段类型下拉选项
const initFieldOption = (fieldOptionType: any) => {
    switch(fieldOptionType) {
        case 1:
            fieldOption.value = fieldOption1
            return 
    }
    fieldOption.value = fieldOption0
}

// 字段类型的改变方法
const fieldTypeChange = () => {
    props.fieldTypeChange(fieldType.value)
}

// 监听字段类型值的改变
watch(
    () => fieldType.value,
    () => {
        fieldTypeChange()
    }
)

// 监听字段类型参数回显的改变
watch(
    () => props.fieldType,
    () => {
        fieldType.value = props.fieldType
    }
)

// 监听是否禁用字段类型
watch(
    () => props.disableFieldType,
    () => {
        disableFieldType.value = props.disableFieldType
    }
)

onMounted(() => {
    initFieldOption(props.fieldOptionType)
    fieldTypeChange()
})
</script>
